<template>
  <div class="publish">
    <van-nav-bar>
      <template #title>
        <div>
          <h4 class="title">发博</h4>
          <h5 class="nick-name">{{ userInfo.nickName }}</h5>
        </div>
      </template>
      <template #left>
        <span class="color-orange" @click="$router.back()">取消</span>
      </template>
      <template #right>
        <van-button
          type="warning"
          size="mini"
          round
          class="confirm-btn"
          @click="submit"
          >确定</van-button
        >
      </template>
    </van-nav-bar>
    <van-field
      class="textarea"
      v-model="message"
      type="textarea"
      placeholder="分享新鲜事"
    />
    <van-uploader
    class="upload"
      v-if="fileList.length"
      v-model="fileList"
      multiple
      :after-read="afterRead"
    />
    <div class="bottom-container">
      <ul class="bottom-wrapper flex justify-between align-center">
        <li class="bottom-item flex align-center">
          <van-icon name="photo-o" />
          <input type="file" class="input-upload" @change="fileChange" />
        </li>
        <li class="bottom-item">
          <van-icon name="fire-o" />
        </li>
        <li class="bottom-item">
          <van-icon name="qr" />
        </li>
        <li class="bottom-item">
          <van-icon name="vip-card-o" />
        </li>
        <li class="bottom-item" @click="emotionFlag = !emotionFlag">
          <van-icon name="smile-o" />
        </li>
        <li class="bottom-item">
          <van-icon name="add-o" />
        </li>
      </ul>
      <div class="emotion-wrapper" v-if="emotionFlag">
        <Emotion @emotionSelect="emotionSelect"></Emotion>
      </div>
    </div>
  </div>
</template>

<script>
import Emotion from "../components/emotion";
export default {
  auth: true,
  components: {
    Emotion,
  },
  data() {
    return {
      emotionFlag: false,
      userInfo: {},
      fileList: [],
      message: "",
    };
  },
  methods: {
    //表情选择
    emotionSelect(emoiton){
      this.message+=emoiton
    },
    //创建博客
    async submit() {
      const res = await this.$axios.post("/v1/blog/addBlog", {
        content: this.message,
        imgList: this.fileList,
      });
      if (res && res.data.code == 200) {
        this.$toast.success(res.data.result);
        this.fileList=[]
        this.message=""
      }
    },
    //文件上传
    async fileChange(event) {
      const file = event.target.files[0];
      if(!file){
        return
      }
      console.log("file", file);
      const formdata = new FormData();
      formdata.append("file", file);
      const res = await this.$axios.post("/v1/common/upload", formdata);
      if (res && res.data.code == 200) {
        this.fileList.push({
          url: res.data.result.url,
          status: "done",
          message: "上传成功",
        });
      } else {
        this.fileList.push({
          url: res.data.result.url,
          status: "failed",
          message: "上传失败",
        });
      }
    },
    async afterRead(file) {
      file.status = "uploading";
      file.message = "上传中...";
      const formdata = new FormData();
      formdata.append("file", file.file);
      const res = await this.$axios.post("/v1/common/upload", formdata);
      if (res && res.data.code == 200) {
        file.status = "done";
        file.message = "上传成功";
        file.url = res.data.result.url;
      } else {
        file.status = "failed";
        file.message = "上传失败";
        file.url = res.data.result.url;
      }
    },
  },
  created() {
    this.userInfo = this.$cookies.get("userInfo");
  },
};
</script>

<style lang="scss" scoped>
.publish {
  .title {
    font-size: 14px;
  }
  .nick-name {
    font-size: 12px;
    color: #999;
  }
  .confirm-btn {
  }
  .upload{
    padding: 10px;
  }
  .textarea {
  }
  .bottom-container {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
    padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
    box-sizing: border-box;
  }
  .bottom-wrapper {
    height: 44px;
    .bottom-item {
      position: relative;
      padding: 0 10px;
      .input-upload {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
      }
    }
  }
  .emotion-wrapper {
    height: 240px;
  }
}
</style>